CSS @property ನಿಯಮ: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಟೈಪ್ ವ್ಯಾಖ್ಯಾನದ ಶಕ್ತಿಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು

CSS ಜಗತ್ತು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಮತ್ತು ಇತ್ತೀಚಿನ ಮತ್ತು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಗಳಲ್ಲಿ ಒಂದು @property ನಿಯಮವಾಗಿದೆ. ಈ ನಿಯಮವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಟೈಪ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಒಂದು ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ನಿಮ್ಮ CSS ಗೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ಮತ್ತು ನಮ್ಯತೆಯನ್ನು ತರುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಅನಿಮೇಷನ್‌ಗಳು, ವರ್ಧಿತ ಥೀಮಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾದ ಒಟ್ಟಾರೆ CSS ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ ದಾರಿ ತೆರೆಯುತ್ತದೆ. ಈ ಲೇಖನವು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು @property ನಿಯಮದ ಸಿಂಟ್ಯಾಕ್ಸ್, ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಿಕೆಗಳನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ.

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು (ವೇರಿಯೇಬಲ್‌ಗಳು) ಎಂದರೇನು?

@property ನಿಯಮದ ಬಗ್ಗೆ ತಿಳಿಯುವ ಮೊದಲು, CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ, ಇದನ್ನು CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಎಂದೂ ಕರೆಯುತ್ತಾರೆ. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ನಿಮ್ಮ CSS ನಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ಅವುಗಳನ್ನು --variable-name ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ಘೋಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು var() ಫಂಕ್ಷನ್ ಬಳಸಿ ಪ್ರವೇಶಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

:root {
  --primary-color: #007bff; /* ಜಾಗತಿಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಪ್ರಾಥಮಿಕ ಬಣ್ಣ */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, --primary-color ಮತ್ತು --secondary-color ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಾಗಿವೆ. ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್‌ಸೈಟ್‌ನಾದ್ಯಂತ ಪ್ರಾಥಮಿಕ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಬೇಕಾದರೆ, ನೀವು ಅದನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ - :root ಸೆಲೆಕ್ಟರ್‌ನಲ್ಲಿ ನವೀಕರಿಸಬೇಕಾಗುತ್ತದೆ.

ಮೂಲ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಮಿತಿ

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ನಂಬಲಾಗದಷ್ಟು ಉಪಯುಕ್ತವಾಗಿದ್ದರೂ, ಅವುಗಳಿಗೆ ಒಂದು ಗಮನಾರ್ಹ ಮಿತಿಯಿದೆ: ಅವುಗಳನ್ನು ಮೂಲಭೂತವಾಗಿ ಸ್ಟ್ರಿಂಗ್‌ಗಳಾಗಿ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಯಾವ ರೀತಿಯ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ (ಉದಾ., ಸಂಖ್ಯೆ, ಬಣ್ಣ, ಉದ್ದ) ಎಂದು CSS ಗೆ ಅಂತರ್ಗತವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ ಪ್ರಕಾರವನ್ನು ಊಹಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೂ, ಇದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳ ವಿಷಯದಲ್ಲಿ. ಉದಾಹರಣೆಗೆ, ಬಣ್ಣವನ್ನು ಹೊಂದಿರುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುವುದು ನಿರೀಕ್ಷೆಯಂತೆ ಕೆಲಸ ಮಾಡದಿರಬಹುದು, ಅಥವಾ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿ ಕೆಲಸ ಮಾಡದಿರಬಹುದು.

@property ನಿಯಮದ ಪರಿಚಯ

@property ನಿಯಮವು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಪ್ರಕಾರ, ಸಿಂಟ್ಯಾಕ್ಸ್, ಆರಂಭಿಕ ಮೌಲ್ಯ ಮತ್ತು ಇನ್ಹೆರಿಟೆನ್ಸ್ (inheritance) ನಡವಳಿಕೆಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಈ ಮಿತಿಯನ್ನು ನಿವಾರಿಸುತ್ತದೆ. ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಅವುಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವಾಗ ಅಥವಾ ಪರಿವರ್ತಿಸುವಾಗ.

@property ನಿಯಮದ ಸಿಂಟ್ಯಾಕ್ಸ್

@property ನಿಯಮದ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿದೆ:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

ಈ ನಿಯಮದ ಪ್ರತಿಯೊಂದು ಭಾಗವನ್ನು ವಿಶ್ಲೇಷಿಸೋಣ:

• --property-name: ಇದು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತಿರುವ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಹೆಸರು. ಇದು ಎರಡು ಹೈಫನ್‌ಗಳೊಂದಿಗೆ (--) ಪ್ರಾರಂಭವಾಗಬೇಕು.
• syntax: ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಮೌಲ್ಯದ ನಿರೀಕ್ಷಿತ ಪ್ರಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆ ಮಾನ್ಯ ಮೌಲ್ಯ(ಗಳನ್ನು) ವಿವರಿಸುವ ಸ್ಟ್ರಿಂಗ್ ಆಗಿದೆ. ಸಾಮಾನ್ಯ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯಗಳು ಸೇರಿವೆ:
• *: ಯಾವುದೇ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಯಾವುದೇ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ ಇದು ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತದೆ. ಪ್ರಕಾರ ಪರಿಶೀಲನೆಯನ್ನು ಬೈಪಾಸ್ ಮಾಡುವುದರಿಂದ ಇದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ.
• <color>: ಯಾವುದೇ ಮಾನ್ಯ CSS ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., #ff0000, rgb(255, 0, 0), red).
• <length>: ಯಾವುದೇ ಮಾನ್ಯ CSS ಉದ್ದದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 10px, 2em, 50%).
• <number>: ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 1, 3.14, -2.5).
• <integer>: ಯಾವುದೇ ಪೂರ್ಣಾಂಕ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 1, -5, 0).
• <angle>: ಯಾವುದೇ ಕೋನದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 45deg, 0.5rad, 100grad).
• <time>: ಯಾವುದೇ ಸಮಯದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 1s, 500ms).
• <percentage>: ಯಾವುದೇ ಶೇಕಡಾವಾರು ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., 50%, 100%).
• <image>: ಯಾವುದೇ ಚಿತ್ರದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಉದಾ., url(image.jpg), linear-gradient(...)).
• <string>: ಯಾವುದೇ ಸ್ಟ್ರಿಂಗ್ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ (ಡಬಲ್ ಅಥವಾ ಸಿಂಗಲ್ ಕೋಟ್‌ಗಳಲ್ಲಿ ಸುತ್ತುವರಿದಿದೆ).
• ನೀವು | ಬಳಸಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ವಿವರಣಕಾರರನ್ನು ಸಂಯೋಜಿಸಬಹುದು (ಉದಾ., <length> | <percentage>).
• ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನೀವು ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು CSS-ವೈಡ್ ಕೀವರ್ಡ್‌ಗಳಾದ inherit, initial, unset, ಮತ್ತು revert ಅನ್ನು ಮಾನ್ಯ ಮೌಲ್ಯಗಳಾಗಿ ಬಳಸುತ್ತದೆ, ಸಿಂಟ್ಯಾಕ್ಸ್ ಪ್ರಕಾರಕ್ಕಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ ಅನುಮತಿಸದಿದ್ದರೂ ಸಹ. ಉದಾಹರಣೆ: '\d+px' '10px', '200px' ನಂತಹ ಮೌಲ್ಯಗಳನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಆದರೆ '10em' ಅಲ್ಲ. ಬ್ಯಾಕ್‌ಸ್ಲ್ಯಾಶ್‌ನ ಡಬಲ್ ಎಸ್ಕೇಪಿಂಗ್ ಅನ್ನು ಗಮನಿಸಿ.
• inherits: ಇದು ಒಂದು ಬೂಲಿಯನ್ ಮೌಲ್ಯ (true ಅಥವಾ false) ಆಗಿದ್ದು, ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ತನ್ನ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ false ಆಗಿದೆ.
• initial-value: ಇದು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಒಂದು ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸದಿದ್ದರೆ ಪ್ರಾಪರ್ಟಿಯು ಈ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ವ್ಯಾಖ್ಯಾನಿಸಲಾದ syntax ಗೆ ಹೊಂದುವ ಮಾನ್ಯ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸುವುದು ಮುಖ್ಯ. ಯಾವುದೇ ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು ಒದಗಿಸದಿದ್ದರೆ ಮತ್ತು ಪ್ರಾಪರ್ಟಿಯು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯದಿದ್ದರೆ, ಅದರ ಆರಂಭಿಕ ಮೌಲ್ಯವು ಅಮಾನ್ಯ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯವಾಗಿರುತ್ತದೆ.

@property ನಿಯಮದ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

@property ನಿಯಮವನ್ನು ನೈಜ-ಜಗತ್ತಿನ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.

ಉದಾಹರಣೆ 1: ಕಸ್ಟಮ್ ಬಣ್ಣವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ಸಾಮಾನ್ಯ CSS ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ಬಳಸಿ ಬಣ್ಣಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು ಕೆಲವೊಮ್ಮೆ ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. @property ನಿಯಮವು ಇದನ್ನು ಹೆಚ್ಚು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* ಹೋವರ್ ಮಾಡಿದಾಗ ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸಿ */
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು --brand-color ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಮತ್ತು ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್ <color> ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ. ನಾವು ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು #007bff (ನೀಲಿ ಬಣ್ಣದ ಛಾಯೆ) ಎಂದು ಹೊಂದಿಸಿದ್ದೇವೆ. ಈಗ, .element ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಹಿನ್ನೆಲೆ ಬಣ್ಣವು ನೀಲಿಯಿಂದ ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ಸುಗಮವಾಗಿ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಕಸ್ಟಮ್ ಉದ್ದವನ್ನು ಅನಿಮೇಟ್ ಮಾಡುವುದು

ಉದ್ದಗಳನ್ನು (ಉದಾ., ಅಗಲ, ಎತ್ತರ) ಅನಿಮೇಟ್ ಮಾಡುವುದು @property ನಿಯಮದ ಮತ್ತೊಂದು ಸಾಮಾನ್ಯ ಬಳಕೆಯಾಗಿದೆ.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

ಇಲ್ಲಿ, ನಾವು --element-width ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಮತ್ತು ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್ <length> ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೇವೆ. ಆರಂಭಿಕ ಮೌಲ್ಯವನ್ನು 100px ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ. .element ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಅದರ ಅಗಲವು 100px ನಿಂದ 200px ಗೆ ಸುಗಮವಾಗಿ ಪರಿವರ್ತನೆಯಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ಕಸ್ಟಮ್ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ರಚಿಸುವುದು

ಅನಿಮೇಷನ್ ಮೇಲೆ ಹೆಚ್ಚು ನಿಯಂತ್ರಣದೊಂದಿಗೆ ಕಸ್ಟಮ್ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳನ್ನು ರಚಿಸಲು @property ನಿಯಮವನ್ನು ಬಳಸಬಹುದು.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು --progress ಎಂಬ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ, ಇದು ಪ್ರಗತಿಯ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ನಂತರ ನಾವು calc() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಿ --progress ಮೌಲ್ಯದ ಆಧಾರದ ಮೇಲೆ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ನ ಅಗಲವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೇವೆ. .progress-bar ಎಲಿಮೆಂಟ್ ಮೇಲೆ data-progress ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿಸುವ ಮೂಲಕ, ನಾವು ಪ್ರಗತಿಯ ಮಟ್ಟವನ್ನು ನಿಯಂತ್ರಿಸಬಹುದು.

ಉದಾಹರಣೆ 4: ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಥೀಮಿಂಗ್

@property ನಿಯಮವು ವಿಭಿನ್ನ ಥೀಮ್‌ಗಳ ನಡುವೆ ಪರಿವರ್ತನೆ ಮಾಡುವಾಗ ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಥೀಮಿಂಗ್ ಅನ್ನು ವರ್ಧಿಸುತ್ತದೆ. ಸರಳವಾದ ಡಾರ್ಕ್/ಲೈಟ್ ಥೀಮ್ ಸ್ವಿಚ್‌ಗಾಗಿ ಈ ಕೆಳಗಿನ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* ಲೈಟ್ ಥೀಮ್ ಡೀಫಾಲ್ಟ್ */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* ಲೈಟ್ ಥೀಮ್ ಡೀಫಾಲ್ಟ್ */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* ಡಾರ್ಕ್ ಥೀಮ್ */
    --text-color: #ffffff;
}

@property ನಿಯಮದೊಂದಿಗೆ --bg-color ಮತ್ತು --text-color ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ಥೀಮ್‌ಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆಯು ವ್ಯಾಖ್ಯಾನಿಸದ ಪ್ರಕಾರಗಳೊಂದಿಗೆ ಮೂಲ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸುಗಮ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿರುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

2023 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ @property ನಿಯಮಕ್ಕೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರಿಗೆ ಈ ವೈಶಿಷ್ಟ್ಯಕ್ಕೆ ಸಾಕಷ್ಟು ಬೆಂಬಲವಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು Can I Use (caniuse.com) ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಒಳ್ಳೆಯದು.

@property ನಿಯಮವನ್ನು ಬೆಂಬಲಿಸದ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ನೀವು ಬೆಂಬಲ ನೀಡಬೇಕಾದರೆ, ನೀವು JavaScript ನೊಂದಿಗೆ ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಬಳಸಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಬ್ರೌಸರ್ CSS.registerProperty (@property ನೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ JavaScript API) ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪತ್ತೆಹಚ್ಚಲು ನೀವು JavaScript ಅನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಬೆಂಬಲಿಸದಿದ್ದರೆ ಪರ್ಯಾಯ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು.

@property ನಿಯಮವನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

@property ನಿಯಮವನ್ನು ಬಳಸುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

• ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗೆ ಅತ್ಯಂತ ಸೂಕ್ತವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯವನ್ನು ಆರಿಸಿ. ಇದು ದೋಷಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ನಿಮ್ಮ CSS ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
• ಆರಂಭಿಕ ಮೌಲ್ಯಗಳನ್ನು ಒದಗಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಯಾವಾಗಲೂ initial-value ಅನ್ನು ಒದಗಿಸಿ. ಇದು ಒಂದು ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸದಿದ್ದರೂ ಸಹ ಪ್ರಾಪರ್ಟಿಗೆ ಮಾನ್ಯವಾದ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಇನ್ಹೆರಿಟೆನ್ಸ್ (Inheritance) ಅನ್ನು ಪರಿಗಣಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಅದರ ಪೋಷಕ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಮೌಲ್ಯವನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯಬೇಕೇ ಎಂದು ಎಚ್ಚರಿಕೆಯಿಂದ ಯೋಚಿಸಿ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು ಇನ್ಹೆರಿಟೆನ್ಸ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ನಿರ್ದಿಷ್ಟ ಕಾರಣವಿಲ್ಲದಿದ್ದರೆ inherits ಅನ್ನು false ಗೆ ಹೊಂದಿಸುವುದು ಉತ್ತಮ.
• ವಿವರಣಾತ್ಮಕ ಪ್ರಾಪರ್ಟಿ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸುವ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಆರಿಸಿ. ಇದು ನಿಮ್ಮ CSS ಅನ್ನು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದು ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, --color ಬದಲಿಗೆ --primary-button-color ಬಳಸಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ CSS ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳ ಮೇಲೆ ವಿಶೇಷ ಗಮನ ಹರಿಸಿ, ಏಕೆಂದರೆ ಇವು @property ನಿಯಮವು ಹೆಚ್ಚು ಪರಿಣಾಮ ಬೀರಬಹುದಾದ ಪ್ರದೇಶಗಳಾಗಿವೆ.
• ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ದಾಖಲಿಸಿ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಉದ್ದೇಶ ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ CSS ಗೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ (ಮತ್ತು ನಿಮ್ಮ ಭವಿಷ್ಯದ ನಿಮಗೆ) ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.

ಪ್ರವೇಶಿಸುವಿಕೆ (Accessibility) ಪರಿಗಣನೆಗಳು

@property ನಿಯಮವನ್ನು ಬಳಸುವಾಗ, ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ಅರಿವಿನ ಅಸಾಮರ್ಥ್ಯ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ಗಮನವನ್ನು ಸೆಳೆಯುವ ಅಥವಾ ಗೊಂದಲಗೊಳಿಸುವಂತಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಫ್ಲ್ಯಾಷ್ ಅಥವಾ ಸ್ಟ್ರೋಬ್ ಮಾಡುವ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಇವು ಕೆಲವು ವ್ಯಕ್ತಿಗಳಲ್ಲಿ ರೋಗಗ್ರಸ್ತವಾಗುವಿಕೆಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.

ಅಲ್ಲದೆ, ದೃಷ್ಟಿ ದೋಷವುಳ್ಳ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ಬಣ್ಣದ ಆಯ್ಕೆಗಳು ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಿಮ್ಮ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು ಪ್ರವೇಶಿಸುವಿಕೆ ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಪೂರೈಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ನೀವು WebAIM ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್‌ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಬಹುದು.

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಸ್ಥಳೀಕರಣವನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. @property ನಿಯಮವನ್ನು ಜಾಗತಿಕ ಸಂದರ್ಭದಲ್ಲಿ ಬಳಸುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ವಿಷಯಗಳು ಇಲ್ಲಿವೆ:

• ಪಠ್ಯದ ದಿಕ್ಕು: ಲೇಔಟ್ ಅಥವಾ ಸ್ಥಾನವನ್ನು ನಿಯಂತ್ರಿಸಲು ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವಾಗ ಪಠ್ಯದ ದಿಕ್ಕಿನ (ಎಡದಿಂದ-ಬಲಕ್ಕೆ vs. ಬಲದಿಂದ-ಎಡಕ್ಕೆ) ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ. ನಿಮ್ಮ ಲೇಔಟ್ ವಿವಿಧ ಪಠ್ಯ ದಿಕ್ಕುಗಳಿಗೆ ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ಉದಾ., margin-left ಬದಲಿಗೆ margin-inline-start) ಬಳಸಿ.
• ಸಂಖ್ಯೆ ಮತ್ತು ದಿನಾಂಕದ ಸ್ವರೂಪಗಳು: ವಿವಿಧ ದೇಶಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ವಿಭಿನ್ನ ಸಂಖ್ಯೆ ಮತ್ತು ದಿನಾಂಕ ಸ್ವರೂಪಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ನಿಮ್ಮ CSS ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಸ್ವರೂಪಗಳನ್ನು ಹಾರ್ಡ್‌ಕೋಡ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ ಮತ್ತು ಬದಲಿಗೆ ಬ್ರೌಸರ್‌ನ ಡೀಫಾಲ್ಟ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿರಿ ಅಥವಾ ಬಳಕೆದಾರರ ಲೊಕೇಲ್‌ಗೆ ಅನುಗುಣವಾಗಿ ಸಂಖ್ಯೆಗಳು ಮತ್ತು ದಿನಾಂಕಗಳನ್ನು ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡಲು JavaScript ಬಳಸಿ.
• ಬಣ್ಣದ ಸಂಕೇತ: ಬಣ್ಣಗಳು ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಅರ್ಥಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಎಂಬುದರ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ. ಕೆಲವು ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ಆಕ್ರಮಣಕಾರಿ ಅಥವಾ ಸೂಕ್ತವಲ್ಲದ ಎಂದು ಪರಿಗಣಿಸಬಹುದಾದ ಬಣ್ಣಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಭಾಷಾ ಬೆಂಬಲ: ನಿಮ್ಮ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ವಿವಿಧ ಭಾಷೆಗಳೊಂದಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಯಾವುದೇ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ವಿವಿಧ ಭಾಷೆಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು @property ನಿಯಮದ ಭವಿಷ್ಯ

@property ನಿಯಮವು CSS ನ ವಿಕಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಿದ್ದಂತೆ, ಈ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಕ್ಕಾಗಿ ನಾವು ಇನ್ನಷ್ಟು ನವೀನ ಉಪಯೋಗಗಳನ್ನು ನೋಡುವ ನಿರೀಕ್ಷೆಯಿದೆ. ಭವಿಷ್ಯದಲ್ಲಿ, ಅರೇಗಳು ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್‌ಗಳಂತಹ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಡೇಟಾ ಪ್ರಕಾರಗಳನ್ನು ಬೆಂಬಲಿಸಲು @property ನಿಯಮಕ್ಕೆ ಹೊಸ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ನಾವು ನೋಡಬಹುದು. ನಾವು JavaScript ನೊಂದಿಗೆ ಉತ್ತಮ ಏಕೀಕರಣವನ್ನು ಸಹ ನೋಡಬಹುದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು @property ನಿಯಮದ ಸಂಯೋಜನೆಯು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಶಕ್ತಿಯುತವಾದ CSS ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ ದಾರಿ ಮಾಡಿಕೊಡುತ್ತಿದೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಆಕರ್ಷಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು.

ತೀರ್ಮಾನ

@property ನಿಯಮವು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಟೈಪ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ, ಅನಿಮೇಷನ್‌ಗಳು, ಥೀಮಿಂಗ್ ಮತ್ತು ಒಟ್ಟಾರೆ CSS ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಾಗಿ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಅದರ ಸಿಂಟ್ಯಾಕ್ಸ್, ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಬೆಳೆಯುತ್ತಲೇ ಇರುವುದರಿಂದ, @property ನಿಯಮವು ನಿಸ್ಸಂದೇಹವಾಗಿ ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ನ ಟೂಲ್‌ಕಿಟ್‌ನಲ್ಲಿ ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಲಿದೆ. ಈ ತಂತ್ರಜ್ಞಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಅದರ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ, ಮತ್ತು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.

ಹೆಚ್ಚಿನ ಓದು

• MDN ವೆಬ್ ಡಾಕ್ಸ್: @property
• ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ವೇರಿಯೇಬಲ್ಸ್ ಮಾಡ್ಯೂಲ್ ಲೆವೆಲ್ 1 ಗಾಗಿ CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು